<template>
  <div>
    <!-- 添加表格上方的插槽，例如操作按钮等 -->
    <slot name="handleOpt"></slot>
    <el-table
      :data="tableData"
      :style="customStyle"
      :height="height"
      stripe
      border
      :header-cell-style="headerCellClsasName"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      v-loading="loading"
    >
      <template #empty>
        <div>{{ $t("table_empty") }}</div>
      </template>
      <el-table-column
        v-if="isShowIndex"
        type="index"
        width="100"
        :label="$t('clueInformation_no')"
        :align="align"
      />
      <el-table-column
      v-if="isShowSelection"
      type="selection" 
      width="100" 
      :align="align"
      />
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="column.overflowToolTip"
        :fixed="column.fixed"
        :sortable="column.sortable"
        :align="align"
      >
        <template v-slot:[`default`]="scope" v-if="column.useSlot">
          <slot :name="column.prop" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        style="margin-top: 30px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200, 300, 400]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper,->,slot"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </el-config-provider>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch, onMounted } from "vue";
import { TableItemDataType } from "../../viewModel/TableComponent/TableComponent";
import zhCnMjs from "element-plus/dist/locale/zh-cn.mjs";
export default defineComponent({
  name: "CustomTable",
  props: {
    requestFn: {
      // 请求函数的配置
      // eslint-disable-next-line
      type: Function as PropType<(params: any) => Promise<any>>,
      required: true,
    },
    columns: {
      // 表头的配置
      type: Array as PropType<TableItemDataType[]>,
      default: () => [],
    },
    initParams: {
      // 请求参数的配置
      type: Object as PropType<any>,
      default: () => ({}),
    },
    customStyle: {
      // 样式的配置
      type: Object,
      default: () => ({}),
    },
    isShowIndex: {
      // 是否显示序号
      type: Boolean,
      default: () => (true)
    },
    isShowSelection: {
      // 是否显示多选
      type: Boolean,
      default: () => (false)
    },
    height: {
      type: String,
      default: () => ("550")
    },
    align: {
      type: String,
      default: () => "left"
    }
  },

  setup(props,{emit}) {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalNum = ref(0);
    const total = ref(0);
    const loading = ref(false);
    const zhCn = zhCnMjs;
    const tableData = ref([]);

    onMounted(() => {
      fetchData();
    });

    // 列表数据请求
    const fetchData = async (params: any = {}) => {
      loading.value = true
      const combinedParams = {
        ...props.initParams,
        pageNo: currentPage.value,
        pageSize: pageSize.value,
        ...params,
      };

      try {
        const result = await props.requestFn(combinedParams);
        loading.value = false
        tableData.value = result.data;
        total.value = result.total;
      } catch {
        loading.value = false
      }
    };

    // 监听参数的变化
    watch(() => props.initParams, fetchData);

    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      fetchData();
    };
    const handlePageChange = (newPage: number) => {
      currentPage.value = newPage;
      fetchData();
    };

    // 多选操作
    const handleSelectionChange = (payload:any) => {
      emit("handleSelectionChange",payload)
    }

    // 排序改变时的处理函数，如果想做所有分页排序，需要调后端的接口才能做到
    const handleSortChange = (payload:any) => {
      // order会返回descending或者null
      console.log('Sorting by', payload);
      // 发送请求到后端获取排序后的数据
    }

    const headerCellClsasName = () => {
      return {
        "background-color": "#f0f0f0",
        color: "#333",
        "font-weight": "bold",
      };
    };
    return {
      currentPage,
      pageSize,
      totalNum,
      total,
      loading,
      zhCn,
      tableData,
      handleSizeChange,
      handlePageChange,
      headerCellClsasName,
      handleSelectionChange,
      handleSortChange,
    };
  },
});
</script>

<style scoped></style>
